<template>
	<view class="page">
		<view class="box_20 flex-col">
			<view class="image-text_35 flex-jus">
				<view class="flex">
					<image class="image_15" referrerpolicy="no-referrer" :src="api_host + userProfile.userAvatar" />
					<view class="text-group_29 flex-col">
						<text class="text_23">{{ userProfile.nickName }}</text>
						<view class="flex-row">
							<text class="text_24" v-if="userProfile.year">{{ userProfile.year }}岁</text>
							<text class="text_24" v-if="userProfile.sex">·{{ userProfile.sex }}</text>
							<text class="text_24" v-if="userProfile.weight">·{{ userProfile.weight }}kg</text>
							<text class="text_24" v-if="userProfile.edu">·{{ userProfile.edu }}</text>
							<text class="text_24" v-if="userProfile.height">·{{ userProfile.height }}cm</text>
						</view>
					</view>
				</view>
				<view class="flex-jus mr20">
					<text></text>
					<view class="flex"
						@click="openUrl('/subpage/meethuangshi/complaintAdd?uid=' + userProfile.userId + '&name=' + userProfile.nickName)">
						<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/ts.png" mode=""
							style="width: 40rpx;height: 40rpx;">
						</image>
						<text class="c343 f26 ml10 bold">投诉TA</text>
					</view>
				</view>
			</view>
			<view class="block_10 flex-row">
				<view v-if="userProfile.idCert === 2" class="flex-row align-center">
					<image class="thumbnail_21" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/sm.png" />
					<text class="text_25">实名</text>
				</view>
				<view v-if="userProfile.idCert === 3" class="flex-row align-center">
					<image class="thumbnail_22" referrerpolicy="no-referrer"
						src="https://hxs.dsjhs.com:553/prod-api/profile/gz-s.png" />
					<text class="text_26">工作</text>
				</view>
			</view>
			<view class="group_7 flex-col"></view>
			<view class="image-text_36 flex-row justify-between" v-if="recentPhotoList.length > 0">
				<image class="label_16" referrerpolicy="no-referrer"
					src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng385f52509c86ca7ed5c2f69eccb2fe37e8ac096b43b9932f87d09219a461a029" />
				<text class="text-group_21">生活近照</text>
			</view>
			<view class="image-wrapper_11 flex-row">
				<image class="image_16" referrerpolicy="no-referrer" :src="api_host + item"
					v-for="(item, index) in recentPhotoList" :key="index" />
			</view>
			<view class="tag-list" v-for="item in filteredUserInfoTagList" :key="item.id">
				<view class="image-text_37 flex-row ">
					<image class="label_17" referrerpolicy="no-referrer" :src="api_host + item.tagIcon" />
					<text class="text-group_22">{{ item.tagName }}</text>
				</view>
				<view class="block_11 flex-row">
					<view class="text-wrapper_19 flex-col" v-for="tag in item.sonTagObj.filter(tag => tag.userSetTag)"
						:key="tag.id">
						<text class="text_35">{{ tag.tagName }}</text>
					</view>
				</view>
			</view>

		</view>
		<!-- <view class="section_6 flex-col">
            <view class="box_25 flex-row">
                <view class="image-text_40 flex-row justify-between">
                    <view class="box_10 flex-col"></view>
                    <text class="text-group_6">动态</text>
                </view>
            </view>
            <view class="box_26 flex-row justify-between">
                <view class="block_14 flex-col">
                    <view class="section_7 flex-col">
                        <view class="image-text_41 flex-col">
                            <image class="image_22" referrerpolicy="no-referrer"
                                src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngc3dd5586865f10cdf3c484a1447a5077874ffd6a8fa40974a5108a9924d02840" />
                            <text class="text-group_30">
                                这是标题，标题标题最多两行超过显示…
                            </text>
                        </view>
                        <view class="image-text_42 flex-row justify-between">
                            <image class="thumbnail_23" referrerpolicy="no-referrer"
                                src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngc3a5b36e9554c1e7386f2527aeee28f1c8651a05950f88471fb9713fc3cec54c" />
                            <text class="text-group_31">1.11万</text>
                        </view>
                    </view>
                </view>
            </view>
        </view> -->
		<view class="group_5 flex-row justify-between">
			<view class="image-wrapper_2 flex-col" @click="handleLike">
				<image :class="['label_5', { 'liked': isLiked }]" referrerpolicy="no-referrer"
					:src="isLiked ? 'https://hxs.dsjhs.com:553/prod-api/profile/icon-like-new.png' : 'https://hxs.dsjhs.com:553/prod-api/profile/huanxi.png'" />
				<text class="text-label">喜欢</text>
			</view>
			<view class="image-wrapper_2 flex-col" @click="handleSendMessage">
				<image class="label_5" referrerpolicy="no-referrer"
					src="https://hxs.dsjhs.com:553/prod-api/profile/liaotian-icon.png" />
				<text class="text-label">打个招呼</text>
			</view>
			<button open-type="share" class="image-wrapper_2 flex-col share-wrap">
				<image class="label_5" referrerpolicy="no-referrer"
					src="https://hxs.dsjhs.com:553/prod-api/profile/fenxiang-m.png" />
				<view class="text-label">分享</view>

			</button>
		</view>

		<!-- 实名认证 -->
		<realname-modal :show="showRealnameModal" @close="showRealnameModal = false"
			@confirm="handleConfirm"></realname-modal>
	</view>
</template>
<script>
import {
	getPersonInfo,
	updateUserLike
} from '@/common/api_meethuangshi.js'
import realnameModal from './realnameModal.vue'
export default {
	components: {
		realnameModal
	},
	data() {
		return {
			userProfile: {},
			userId: '',
			currentUser: {},
			isLiked: false,
			showRealnameModal: false
		};
	},
	async onLoad(options) {
		// 从本地存储恢复 currentUserInfo 到 store
		try {
			this.currentUser = uni.getStorageSync('currentUserInfo')
			console.log(this.currentUser, ' this.currentUser')
		} catch (e) {
			console.log('恢复用户信息失败:', e)
		}
		console.log(options, 'options')
		this.userId = options.id
		this.getPersonInfo()


	},

	computed: {
		recentPhotoList() {
			const profile = this.userProfile || {}
			const {
				recentPhoto
			} = profile

			if (!recentPhoto) {
				return []
			}

			if (Array.isArray(recentPhoto)) {
				return recentPhoto
					.map((path) => (typeof path === 'string' ? path.trim() : path))
					.filter((path) => typeof path === 'string' && path.length > 0)
			}

			if (typeof recentPhoto === 'string') {
				return Array.from(
					new Set(
						recentPhoto
							.replace(/，/g, ',')
							.split(',')
							.map((s) => s.trim())
							.filter((s) => s.length > 0)
					)
				)
			}

			return []
		},
		filteredUserInfoTagList() {
			if (!this.userProfile.userInfoTagList) return []
			return this.userProfile.userInfoTagList.filter(item =>
				item.sonTagObj && item.sonTagObj.some(tag => tag.userSetTag)
			)
		}
	},
	onShareAppMessage(res) {
		return {
			title: '东楚畅通',
			path: `/subpage/meethuangshi/personalHomepage?id=${this.userId}`,
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
				console.log(res, 'onShareAppMessage')
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
	methods: {
		// 喜欢
		async handleLike() {
			const res = await updateUserLike({
				userId: this.currentUser.userId,
				likeUserId: this.userId,
				isLike: this.isLiked ? 0 : 1
			})
			if (res.code === 200) {
				this.isLiked = !this.isLiked
			}

		},
		handleSendMessage() {
			console.log('handleSendMessage')
			if (this.currentUser.idCert === 2) {
				uni.navigateTo({
					url: `/subpage/meethuangshi/chat?id=${this.userProfile.userId}&nickName=${this.userProfile.nickName}&userAvatar=${this.userProfile.userAvatar}`
				});
			} else {
				this.showRealnameModal = true
			}
		},
		async getPersonInfo() {
			const res = await getPersonInfo({
				userId: this.currentUser.userId,
				targetUserId: this.userId
			})
			if (res.code === 200) {
				this.userProfile = res.data
				this.isLiked = res.data.likeStatus === 1
			}


			console.log(this.userProfile, 'this.userProfile')
		},
		handleShare() {
			console.log('handleShare')
		},
		handleConfirm() {
			this.showRealnameModal = false
			uni.navigateTo({
				url: `/subpage/meethuangshi/acceptAuth?isUpdate=true`
			});
		},
	},
};
</script>
<style lang="scss" scoped>
@import '../../static/style/common.css';

.page {
	background-color: rgba(247, 246, 255, 1);
	position: relative;
	min-height: 100vh;
	padding: 30rpx;
	// overflow: hidden;

	.section_5 {
		padding: 18px 6px 16px 6px;

		.block_8 {
			margin: 0 27px 0 37px;

			.text_33 {
				overflow-wrap: break-word;
				color: rgba(0, 0, 0, 1);
				font-size: 17px;
				font-family: SFPro-Semibold;
				font-weight: 600;
				text-align: right;
				white-space: nowrap;
				line-height: 22px;
			}

			.thumbnail_19 {
				width: 19px;
				height: 12px;
				margin: 5px 0 5px 182px;
			}

			.thumbnail_20 {
				width: 17px;
				height: 12px;
				margin: 5px 0 5px 8px;
			}

			.image_21 {
				width: 27px;
				height: 13px;
				margin: 5px 0 4px 7px;
			}
		}

		.block_9 {
			width: 378px;
			margin-top: 13px;

			.image_2 {
				width: 87px;
				height: 32px;
			}

			.text_34 {
				height: 24px;
				overflow-wrap: break-word;
				color: rgba(0, 0, 0, 1);
				font-size: 17px;
				font-family: SFProDisplay-Medium;
				font-weight: 500;
				text-align: right;
				white-space: nowrap;
				line-height: 20px;
				margin-top: 4px;
			}

			.image_3 {
				width: 87px;
				height: 32px;
			}
		}
	}

	.box_20 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 40px 20px 20px 20px;
		align-self: center;
		margin-top: -1px;
		padding: 8px 0 16px 12px;

		.image-text_35 {

			.image_15 {
				width: 56px;
				height: 56px;
				border-radius: 50%;
				margin-right: 12px;
			}

			.text-group_29 {
				margin: 6px 0 4px 0;

				.text_23 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 16px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 22px;
				}

				.text_24 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
					margin: 4px 0 0 0;
				}
			}
		}

		.block_10 {
			margin: 0 182px 0 66px;

			.thumbnail_21 {
				width: 16px;
				height: 16px;
			}

			.text_25 {
				overflow-wrap: break-word;
				color: rgba(52, 49, 79, 1);
				font-size: 12px;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 16px;
				margin-left: 2px;
			}

			.thumbnail_22 {
				width: 16px;
				height: 16px;
				margin-left: 10px;
			}

			.text_26 {
				overflow-wrap: break-word;
				color: rgba(52, 49, 79, 1);
				font-size: 12px;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 16px;
				margin-left: 2px;
			}
		}

		.group_7 {
			background-color: rgba(52, 49, 79, 0.08);
			width: 342px;
			height: 1px;
			margin: 12px 0 0 4px;
		}

		.image-text_36 {
			width: 94px;
			margin: 16px 248px 0 4px;

			.label_16 {
				width: 24px;
				height: 24px;
			}

			.text-group_21 {
				overflow-wrap: break-word;
				color: rgba(52, 49, 79, 1);
				font-size: 16px;
				font-family: PingFangSC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 22px;
				margin-top: 1px;
			}
		}

		.image-wrapper_11 {
			width: 327px;
			max-height: 76px;
			margin: 8px 15px 0 4px;

			.image_16 {
				width: 76px;
				height: 76px;
				margin-right: 7px;
				border-radius: 12px;
			}
		}

		.image-text_37 {
			width: 94px;
			margin: 16px 248px 0 4px;

			.label_17 {
				width: 24px;
				height: 24px;
			}

			.text-group_22 {
				margin-left: 6px;
				overflow-wrap: break-word;
				color: rgba(52, 49, 79, 1);
				font-size: 16px;
				font-family: PingFangSC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 22px;
				margin-top: 1px;
			}
		}

		.block_11 {
			width: 178px;
			margin: 8px 164px 0 4px;
			gap: 8px;

			.text-wrapper_19 {
				background-color: rgba(52, 49, 79, 0.06);
				border-radius: 14px;
				padding: 8px 12px 8px 12px;

				.text_35 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}
			}

			.text-wrapper_20 {
				background-color: rgba(52, 49, 79, 0.06);
				border-radius: 14px;
				padding: 8px 12px 8px 12px;

				.text_36 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}
			}
		}

		.image-text_38 {
			width: 94px;
			margin: 16px 248px 0 4px;

			.label_18 {
				width: 24px;
				height: 24px;
			}

			.text-group_23 {
				overflow-wrap: break-word;
				color: rgba(52, 49, 79, 1);
				font-size: 16px;
				font-family: PingFangSC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 22px;
				margin-top: 1px;
			}
		}

		.block_12 {
			width: 164px;
			margin: 8px 178px 0 4px;

			.text-wrapper_21 {
				background-color: rgba(52, 49, 79, 0.06);
				border-radius: 14px;
				padding: 8px 12px 8px 12px;

				.text_37 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}
			}

			.text-wrapper_22 {
				background-color: rgba(52, 49, 79, 0.06);
				border-radius: 14px;
				padding: 8px 12px 8px 12px;

				.text_38 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}
			}
		}

		.image-text_39 {
			width: 78px;
			margin: 16px 264px 0 4px;

			.label_19 {
				width: 24px;
				height: 24px;
			}

			.text-group_24 {
				overflow-wrap: break-word;
				color: rgba(52, 49, 79, 1);
				font-size: 16px;
				font-family: PingFangSC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 22px;
				margin-top: 1px;
			}
		}

		.block_13 {
			width: 220px;
			margin: 8px 122px 0 4px;

			.text-wrapper_23 {
				background-color: rgba(52, 49, 79, 0.06);
				border-radius: 14px;
				padding: 8px 12px 8px 12px;

				.text_39 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}
			}

			.text-wrapper_24 {
				background-color: rgba(52, 49, 79, 0.06);
				border-radius: 14px;
				padding: 8px 12px 8px 12px;

				.text_40 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
				}
			}
		}
	}

	.section_6 {
		padding: 20px 6px 1px 16px;

		.box_25 {
			margin-right: 296px;

			.image-text_40 {
				width: 72px;

				.box_10 {
					background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/477ba7e2d16640629797cf166a1cc90d_mergeImage.png);
					width: 32px;
					height: 32px;
				}

				.text-group_6 {
					overflow-wrap: break-word;
					color: rgba(52, 49, 79, 1);
					font-size: 18px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 25px;
					margin-top: 3px;
				}
			}
		}

		.box_26 {
			width: 368px;
			margin-top: 6px;

			.block_14 {
				.section_7 {
					background-color: rgba(255, 255, 255, 1);
					border-radius: 14px;
					padding-bottom: 8px;

					.image-text_41 {
						.image_22 {
							width: 176px;
							height: 235px;
						}

						.text-group_30 {
							width: 156px;
							height: 40px;
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 14px;
							font-weight: normal;
							text-align: left;
							line-height: 20px;
							align-self: center;
							margin-top: 8px;
						}
					}

					.image-text_42 {
						width: 47px;
						margin: 4px 118px 0 11px;

						.thumbnail_23 {
							width: 15px;
							height: 15px;
							margin-top: 1px;
						}

						.text-group_31 {
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 12px;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 16px;
						}
					}
				}

				.image-wrapper_12 {
					background-color: rgba(255, 255, 255, 1);
					border-radius: 14px;
					margin-top: 6px;

					.image_23 {
						width: 176px;
						height: 183px;
					}
				}
			}

			.block_15 {
				.group_14 {
					background-color: rgba(255, 255, 255, 1);
					border-radius: 14px;
					padding-bottom: 8px;

					.image-text_43 {
						.image_24 {
							width: 176px;
							height: 235px;
						}

						.text-group_32 {
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 14px;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 20px;
							align-self: center;
							margin-top: 8px;
						}
					}

					.image-text_44 {
						width: 47px;
						margin: 4px 118px 0 11px;

						.thumbnail_24 {
							width: 15px;
							height: 15px;
							margin-top: 1px;
						}

						.text-group_33 {
							overflow-wrap: break-word;
							color: rgba(52, 49, 79, 1);
							font-size: 12px;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 16px;
						}
					}
				}

				.image-wrapper_13 {
					background-color: rgba(255, 255, 255, 1);
					border-radius: 14px;
					margin-top: 6px;

					.image_25 {
						width: 176px;
						height: 203px;
					}
				}
			}

			.block_5 {
				background-color: rgba(186, 186, 186, 1);
				border-radius: 2px;
				width: 4px;
				height: 84px;
				margin: 81px 0 335px 0;
			}
		}
	}

	.group_5 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 32px 32px 0px 0px;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 0 65px;


		.text-label {
			margin-top: 13px;
			overflow-wrap: break-word;
			color: rgba(52, 49, 79, 1);
			font-size: 14px;
			font-weight: normal;
			text-align: center;
			white-space: nowrap;
			line-height: 20px;
		}



		.image-wrapper_2 {
			position: relative;
			left: 0;
			top: -8px;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 20px;
			height: 82px;
			width: 60px;


			.label_5 {
				width: 60px;
				height: 48px;
				padding: 10px 15px;
				border-radius: 20px;
				background: #fff;
				box-sizing: border-box;

				&.liked {
					background: #FF7696;
				}
			}

			&::after {
				border: 0;
			}
		}

		.image-wrapper_3 {
			background-color: rgba(255, 255, 255, 1);
			border-radius: 20px;
			height: 48px;
			width: 60px;
			// position: absolute;
			// left: 165px;
			// top: -8px;
			padding: 9px 15px 9px 15px;

			.label_6 {
				width: 30px;
				height: 30px;
			}
		}

		.image-wrapper_4 {
			background-color: rgba(255, 255, 255, 1);
			border-radius: 20px;
			height: 48px;
			width: 60px;
			// position: absolute;
			// left: 265px;
			// top: -8px;
			padding: 9px 15px 9px 15px;

			// padding: 0;
			// background-color: #fff;



			.label_7 {
				width: 30px;
				height: 30px;
			}
		}
	}
}
</style>